<template>
  <div>
    <el-dialog v-model="open" :title="uploadParams.title || '导入'" width="400px" append-to-body @close="close">
      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="headers" :action="importUrl" :data="uploadParams.params" :disabled="isUploading"
        :before-upload="handleFileBeforeUpload" :on-progress="handleFileUploadProgress" :on-error="handleFileUploadError"
        :on-success="handleFileSuccess" :auto-upload="false" drag>
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
              :download="uploadParams.templateName" @click="importTemplate">模板下载</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button plain @click="close">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { getToken } from "@/utils/auth"

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  uploadParams: {
    type: Object,
    default: () => {}
  }
})

const importUrl = computed(() => import.meta.env.VITE_APP_BASE_API + props.uploadParams.url )
const emits = defineEmits(['update:open', 'importSuccess'])
const { proxy } = getCurrentInstance()
const isUploading = ref(false)
// const headers = { token: "token " + getToken() }
const headers = computed(() => ({ token: "token " + getToken(), ...props.uploadParams.headers }) )

// 文件上传前处理
function handleFileBeforeUpload(file) {
  proxy.$modal.loading("正在导入文件，请稍候...")
  return true
}

// 文件上传中处理
const handleFileUploadProgress = (event, file, fileList) => {
  isUploading.value = true
}
// 上传失败
const handleFileUploadError = (err) => {
  proxy.$modal.closeLoading()
  proxy.$modal.msgError("导入文件失败")
}
// 文件上传成功
const handleFileSuccess = (response, file, fileList) => {
  isUploading.value = false
  proxy.$modal.closeLoading()
  proxy.$refs["uploadRef"].handleRemove(file)
  if(response.code == 200){
    proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.data + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
    emits('importSuccess', file)
  }else{
    proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.message + "</div>", "导入结果", { dangerouslyUseHTMLString: true })
  }
  close()
};

// 提交上传文件
const submitFileForm = () => {
  proxy.$refs["uploadRef"].submit()
}
// 模板下载
const importTemplate = () => {
  const {templateUrl, templateName, downloadParams, config } = props.uploadParams
  proxy.download(`${templateUrl}`, downloadParams, templateName, config)  
}

const close = () => {
  emits('update:open', false)
}
</script>
<style scoped></style>